<script setup lang="ts">
import type { Banner } from '@/types/home'
import type { TemplateMap } from '@/types/template'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHomeBannerApi } from '@/services/home'
import { getTemplateMapApi } from '@/services/template'
import CustomNavbar from './components/CustomNavbar.vue'
import TemplateMapPanel from './components/TemplateMapPanel.vue'

// 获取轮播图数据
const bannerList = ref<Banner[]>([])
const getBannerData = async () => {
  const res = await getHomeBannerApi()
  bannerList.value = res.data
}

// 获取线路分类数据
const templateMap = ref<TemplateMap[]>([])
const getTemplateMapData = async () => {
  const res = await getTemplateMapApi()
  templateMap.value = res.data
}

// 页面加载
onLoad(async () => {
  await Promise.all([getBannerData(), getTemplateMapData()])
})
</script>

<template>
  <CustomNavbar />
  <scroll-view class="scroll-view" scroll-y>
    <HxSwiper :list="bannerList" />
    <TemplateMapPanel :map="templateMap" />
  </scroll-view>
</template>

<style lang="scss" scoped>
/* #ifdef APP-PLUS */
#app,
/* #endif */
page {
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  .scroll-view {
    flex: 1;
  }
}
</style>
